<template>
	 <div id="user">
		<el-container>
		  <el-aside width="200px" class="useraside flexcol">
		  		<div class="usertit">个人中心</div>
				<!-- <router-link :to="{name:'UserWork',params:{name}}" active-class="active" class="workitem"><div class="bg-work"></div><span>工作台</span></router-link> -->
				<router-link to="/userwork" active-class="active" class="workitem"><div class="bg-work"></div><span>工作台</span></router-link>
				<router-link to="/userinfo" active-class="active"><div class="bg-info"></div><span>个人资料</span></router-link>
				<router-link to="/userpay" active-class="active"><div class="bg-pay"></div><span>充值中心</span></router-link>
				<router-link to="/useradv" active-class="active"><div class="bg-adv"></div><span>我的评价</span></router-link>
				<router-link to="/home" tag="div" class="userquit flexcol">
					<i class="iconfont iconfanhui1"></i>
					<span>返回主页</span>
				</router-link>
		  </el-aside>
		  <el-main>
		  	<router-view></router-view>
		  </el-main>
		</el-container>
	 </div>
</template>
<script>
	import UserWork from './user/UserWork'
	import UserInfo from './user/UserInfo'
	import UserPay from './user/UserPay'
	import UserAdv from './user/UserAdv'
	import storage from '../../storage/index'
	import axios from 'axios'
  import {updateUserInfo} from "../../util/common";

  	export default {
	    name: 'User',
	    components: { 
	      UserWork,
	      UserInfo,
	      UserPay,
	      UserAdv
	    },
	   
	   data() {
        	return {
        			
        	}
	    },
	    methods:{

	    },
	    created (){
        updateUserInfo();
	    }  
  	}


</script>

<style scoped>
	.useraside{
		color:#fff;
		text-align: center;
		position: relative;
		background: url(../../assets/images/userbg.png) no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}
	.usertit{
		font-size: 28px;
		font-weight: 400;
	    margin:75px auto;
	    -webkit-app-region: drag;

	}
	.useraside a{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 17px;font-weight: 200;
		width: 100%;
		height: 50px;
		line-height: 50px;
	}
	/*.useraside a:hover{
		background: #f4f8ff;
		color:#666666;
	}*/
	.useraside a.active{
		background: #f4f8ff;
		color: #666;
		font-weight: 300;
	}
	.useraside .workitem div{
		margin-left: -15px;
	}
	.useraside a div{
		margin-right: 10px;
	}
	.userquit{
	    position: absolute;
	    left:70px;
	    bottom: 30px;
	    color:#9abcf6;
	    font-size: 14px;
	}
	.userquit:hover{
		color: #fff;
		cursor: pointer;
	}
	.userquit i{
		font-size: 30px;
		margin-bottom:15px;
	}
	#user >>>.el-main{
		padding:0;
		/*height: 665px !important;*/
		height: 725px !important;
	}
	.bg-adv{
    width: 20px; height: 22px;
    background: url('./user/img/css_sprites.png') -10px -51px;
}
.active .bg-adv{
    background: url('./user/img/css_sprites.png') -50px -51px;
}
.bg-info{
    width: 21px; height: 21px;
    background: url('./user/img/css_sprites.png') -10px -10px;
}


.active .bg-info{
    background: url('./user/img/css_sprites.png') -51px -10px;
}


.bg-pay{
    width: 24px; height: 17px;
    background: url('./user/img/css_sprites.png') -92px -10px;
}


.active .bg-pay{
    background: url('./user/img/css_sprites.png') -92px -47px;
}


.bg-work{
    width: 19px; height: 19px;
    background: url('./user/img/css_sprites.png') -10px -93px;
}


.active .bg-work{
    background: url('./user/img/css_sprites.png') -49px -93px;
}


</style>